<template>
	<tm-fullView>
		<tm-menubars title="poup弹出层" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet  :shadow="24">
			<tm-button @click="show_1=true">底部弹出</tm-button>
			<tm-poup @change="tanchtest" v-model="show_1" position="bottom"></tm-poup>
			<tm-button @click="show_2=true">顶部弹出</tm-button>
			<tm-poup v-model="show_2" position="top"></tm-poup>
			<tm-button @click="show_3=true">左边弹出</tm-button>
			<tm-poup v-model="show_3" position="left"></tm-poup>
			<tm-button @click="show_4=true">右边弹出</tm-button>
			<tm-poup v-model="show_4" position="right"></tm-poup>
			<tm-button @click="show_5=true">中间弹出</tm-button>
			<tm-poup v-model="show_5" position="center"></tm-poup>
		</tm-sheet>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmPoup from "@/tm-vuetify/components/tm-poup/tm-poup.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmPoup},
		data() {
			return {
				show_1:false,
				
				show_2:false,
				show_3:false,
				show_4:false,
				show_5:false,
				
			}
		},
		methods: {
			tanchtest(e){
				console.log(e);
			}
			
		}
	}
</script>

<style>

</style>
